<template>
  <div class="project-center-container">
    <div class="project-center-header">项目中心</div>
    <el-button class="project-center-header-btn" @click="addProject"><el-icon><Plus /></el-icon> 新建项目</el-button>
    <el-table :data="projectStore.projectList" stripe style="width: 100%" class="project-list-table">
      <el-table-column label="序号" type="index" width="60"/>
      <el-table-column label="项目名称" prop="name"/>
      <el-table-column label="简介" prop="description"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="toProject(scope.row)">查看</el-button>
          <el-button type="text" @click="editProject(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteProject(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新建项目" v-model="addDialogVisible" @close="handleAddClose">
      <el-form label-position="top">
        <el-form-item label="名称" required>
          <el-input v-model="addEntity.name"/>
        </el-form-item>
        <el-form-item label="简介" required>
          <el-input type="textarea" v-model="addEntity.description"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑项目" v-model="editDialogVisible" @close="handleEditClose">
      <el-form label-position="top">
        <el-form-item label="名称" required>
          <el-input v-model="editEntity.name"/>
        </el-form-item>
        <el-form-item label="简介" required>
          <el-input type="textarea" v-model="editEntity.description"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {useProjectStore} from "@/store/useProjectStore";
import type Project from "@/utils/project";
import {useRouter} from "vue-router";

const projectStore = useProjectStore()

const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const addEntity = reactive({
  name: '',
  description: ''
})
const editEntity = reactive({
  id: '',
  name: '',
  description: ''
})

const addProject = () => {
  addDialogVisible.value = true
}

const handleAddClose = () => {
  addEntity.name = ''
  addEntity.description = ''
}

const confirmAdd = () => {
  projectStore.addProject(addEntity);
  console.log(projectStore.projectList)
  addDialogVisible.value = false
}

const router = useRouter()

const toProject = (project: Project) => {
  console.log(project)
  router.push({path: '/projectDetail', query: {id: project.id}})
}
const editProject = (project: Project) => {
  editEntity.id = project.id
  editEntity.name = project.name
  editEntity.description = project.description
  editDialogVisible.value = true
}

const handleEditClose = () => {
  editEntity.name = ''
  editEntity.description = ''
}

const confirmEdit = () => {
  projectStore.updateProject(editEntity);
  editDialogVisible.value = false
}

const deleteProject = (project: Project) => {
  projectStore.deleteProject(project.id)
}

</script>

<style scoped>
  .project-center-container {
    width: 100%;
    height: 100%;
    padding: 24px;
  }
  .project-list-table {
    width: 100%;
    height: calc(100% - 40px);
  }
  .project-center-header {
    height: 32px;
    line-height: 32px;
    font-size: 22px;
    font-weight: 600;
    margin-right: 16px;
    display: inline-block;
  }
  .project-center-header-btn {
    display: inline-block;
    vertical-align: top;
  }
</style>
